<template>
  <div class="tabCon">
    <div class="tabList">
      <div class="pagerTitleList">
        <div
          :class="[
            tab.currentTab == item.tagId
              ? 'pagerTitle pagerTitleSeleted'
              : 'pagerTitle'
          ]"
          v-for="(item, index) in tab.tabList"
          :key="index"
          @click="seletTab(item.tagId, index)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="moveBorder" ref="moveBorder"></div>
    </div>
    <div class="tabExtraBtn">
      <span class="icon iconfont" style="color:#fff">&#xe877;</span>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onMounted } from "@vue/composition-api";
export default {
  name: "TabLayout",
  setup: function() {
    const tab = reactive({
      tabList: [
        {
          title: "关注",
          tagId: "follow"
        },
        {
          title: "推荐",
          tagId: "recommend"
        },
        {
          title: "热榜",
          tagId: "hot"
        }
      ],
      currentTab: "recommend"
    });

    const moveBorder = ref(null);

    const seletTab = function(nowTab, index) {
      const dom = moveBorder.value;
      dom.style.left = index * 60 + "px";
      tab.currentTab = nowTab;
    };

    onMounted(() => {
      for (let i = 0; i < tab.tabList.length; i++) {
        if (tab.tabList[i].tagId == tab.currentTab) {
          seletTab(tab.currentTab, i);
        }
      }
    });

    return {
      tab,
      seletTab,
      moveBorder
    };
  }
};
</script>

<style lang="stylus" scoped>
.tabCon
	width 100%
	overflow hidden
	display flex
	background-color #007FFF
	padding-top 10px
	.tabList
		flex 1
		overflow hidden
		position relative
		height 32px
	.tabExtraBtn
		color #fff
		display flex
		align-items center
		justify-content center
		margin-right 15px

.pagerTitleList
	white-space nowrap
	overflow-x auto
	overflow-y hidden
	position absolute
	left 0
	top 0
	bottom 2px
.pagerTitle
	width 60px
	height 30px
	line-height 30px
	text-align center
	font-size 14px
	color #3299FF
	display inline-block
	cursor pointer
.pagerTitleSeleted
	font-size 14px
	color #fff
.moveBorder
	width 60px
	height 2px
	background #fff
	position absolute
	left 0
	bottom 0
	transition left 0.5s ease
</style>
